<template>
  <div class="header">
    <div class="user-info">
      <img :src="adminitem.adminImg" :alt="adminitem.adminName" class="avatar">
      <span>{{adminitem.adminName}}</span>
    </div>
<!--    <div class="menu">-->
<!--      <ul>-->
<!--        <li v-for="menuItem in menuItems" :key="menuItem.id" @click="handleMenuItemClick(menuItem.id)">-->
<!--          {{ menuItem.name }}-->
<!--          <span v-if="activeMenuItem === menuItem.id" class="record-box"></span>-->
<!--        </li>-->
<!--      </ul>-->
<!--    </div>-->
    <div class="placeholders">
      <div class="placeholder" v-for="i in 4" :key="i"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderComponent',
  data () {
    return {
      activeMenuItem: null,
      // menuItems: [
      //   { id: 1, name: '菜单项1' },
      //   { id: 2, name: '菜单项2' },
      //   { id: 3, name: '菜单项3' },
      //   { id: 4, name: '菜单项4' },
      //   // 可根据需要继续添加菜单项
      // ],
      adminitem:{
        adminId:'',
        adminName:'',
        adminPass:'',
        adminTel:'',
        adminEmail:'',
        adminImg:'http://rwuqscd8h.bkt.clouddn.com/09a21a0b-b5dc-4ea8-bdf5-29cede3777c4',
        adminSex:'',
        adminRole:''
      },
    }
  },
  methods: {
    handleMenuItemClick (itemId) {
      this.activeMenuItem = itemId;
      // 处理记录小框的逻辑，比如调用接口保存记录等
    }
  },
  mounted() {
    var admin = localStorage.getItem("admin");
    this.adminitem = admin;
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  /*background-color: white;*/
  /*color: black;*/
  padding: 0 20px;
  width: 100%;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.menu {
  position: relative;
}

.menu ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.menu ul li {
  margin-right: 20px;
  cursor: pointer;
}

.record-box {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 5px;
}

.placeholders {
  display: flex;
}

.placeholder {
  width: 60px;
  height: 20px;
  background-color: #eee;
  margin-right: 10px;
}
</style>
